<template>
    <div id="app">
        <div id="fenye" class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" />
        </div>

        <!-- 新分页器 -->
        <!-- <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :background="background"
                :page-sizes="[6, 10, 15]" layout="total, prev, pager, next, sizes, jumper" :total="totalData"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" medium />
        </div> -->
    </div>
</template>
<script lang="ts">
import axios from '@/util/http';


import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
    name: "fenye",
    setup() {
        const currentPage4 = ref(4)
        const pageSize4 = ref(100)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange1 = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange1 = (val: number) => {
            console.log(`current page: ${val}`)
        }

        // //新分页器
        // const state = reactive({
        //     // 分页器
        //     currentPage: ref(1),
        //     pageSize: ref(6),
        //     totalData: ref(),
        //     background: ref(true)
        // })

        // const handleSizeChange = (val: number) => {
        //     axios({
        //         method: 'post',
        //         url: 'city_sys_organization/findorganizations',
        //         params: {
        //             currentPage: state.currentPage,
        //             pageSize: val,
        //             orgName: state.name.trim(),
        //             adminName: state.admin.trim(),
        //             adminPhone: state.tel.trim(),
        //         }
        //     })
        //         .then(res => {
        //             state.InstitutionalData = res.data.data.citySysOrganizationList

        //         })
        // }
        // const handleCurrentChange = (val: number) => {
        //     axios({
        //         method: 'post',
        //         url: 'city_sys_organization/findorganizations',
        //         params: {
        //             currentPage: val,
        //             pageSize: state.pageSize,
        //             orgName: state.name.trim(),
        //             adminName: state.admin.trim(),
        //             adminPhone: state.tel.trim(),
        //         }
        //     })
        //         .then(res => {
        //             console.log(res);
        //             state.InstitutionalData = res.data.data.citySysOrganizationList
        //         })
        // }
        // onBeforeMount(async() => {
        //     await axios({
        //         method: 'post',
        //         url: 'city_sys_organization/findorganizations',
        //         params: {
        //             currentPage: state.currentPage,
        //             pageSize: state.pageSize
        //         }
        //     })
        //         .then(res => {
        //             state.InstitutionalData = res.data.data.citySysOrganizationList


        //             // 分页器
        //             state.totalData = res.data.data.total
        //         })

        // })


        return {
            currentPage4,
            pageSize4,
            small,
            background,
            disabled,
            handleSizeChange1,
            handleCurrentChange1,
            //新分页器方法
            // handleSizeChange,
            // handleCurrentChange

        }
    }
})

</script>
<style scoped>
#app {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: white;
    font-size: 13px;
    color: #333;
}

#fenye {
    padding: 10px 35px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>